<template>
  <div id="header">
    <div class="header-nvabar">
      <div class="left-menu">
        <hamburger style="margin-right: 20px;cursor:pointer;" :is-active="!sidebar.isCollapse" @toggleClick="toggleSideBar"></hamburger>
        <breadcrumb></breadcrumb>
      </div>
      <div class="right-menu">
        <ScreenFull style="margin-right: 20px;cursor:pointer;"/>
        <Avatar/>
      </div>
    </div>
    <div class="header-tag"></div>
  </div>
</template>

<script lang="ts">
  import { defineComponent, computed } from 'vue';
  import { useStore } from "vuex";
  import Hamburger from '@/components/Hamburger/index.vue';
  import Breadcrumb from '@/components/Breadcrumb/index.vue';
  import ScreenFull from '@/components/ScreenFull/index.vue';
  import Avatar from '@/components/Avatar/index.vue';

  export default defineComponent({
    name: "Header",
    setup() {
      const store = useStore()
      const sidebar = computed(() => store.state.app.sidebar)
      const toggleSideBar = function() {
        store.commit('app/setSidebarCollapse')
      }
      return {
        toggleSideBar,
        sidebar
      }
    },
    components: {
      Hamburger,
      Breadcrumb,
      ScreenFull,
      Avatar
    }
  })
</script>

<style scoped lang="less">
 #header {
  .header-nvabar {
    height: 50px;
    border-bottom: 1px solid #eee;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .left-menu{
      display: flex;
    }
    .right-menu {
      display: flex;
      align-items: center;
    }
  }
  .header-tag {
    z-index: 1;
  }
 }
</style>
